import { ProTable } from '@ant-design/pro-table';
import { request } from 'ice';
import { ReactNode } from 'react';
import { message } from 'antd';
import { ProFormProps } from '@ant-design/pro-form';
import { ProColumns } from '@ant-design/pro-table/lib/typing';
import { SearchConfig } from '@ant-design/pro-table/lib/components/Form/FormRender';

interface AppTableProps {
  title: string;
  api?: string;
  request?: (
    params: JSONObject,
    sort,
    filter,
  ) => Promise<{
    data: any[];
    success: boolean;
    total: number;
  }>;
  params?: JSONObject;
  postData?: (data: any[]) => any[];
  toolBarRender?: (
    action: any | undefined,
    rows: {
      selectedRowKeys?: (string | number)[];
      selectedRows?: any[];
    },
  ) => ReactNode[];
  toolbarActions?: ReactNode[];
  tableClassName?: string;
  search?: false | SearchConfig;
  beforeSearchSubmit?: (params: any) => any;
  form?: ProFormProps;
  onSubmit?: (params: any) => void;
  onReset?: () => void;
  columnEmptyText?: string;
  debounceTime?: number;
  columns?: ProColumns[];
  alwaysShowAlert?: boolean;
  alertKey?: string;
}

/**
 * 应用表格展示
 * @param props
 * @returns
 */
const AppTable = function (props: AppTableProps) {
  const {
    title,
    request: customRequest,
    api,
    params,
    postData,
    toolBarRender,
    tableClassName,
    search,
    beforeSearchSubmit,
    form,
    onSubmit,
    onReset,
    columnEmptyText,
    debounceTime = 200,
    columns,
    alwaysShowAlert,
    alertKey,
    toolbarActions,
  } = props;
  return (
    <ProTable
      title={(config) => {
        return title;
      }}
      request={async (params, sort, filter): Promise<any> => {
        if (customRequest) {
          return await customRequest(params, sort, filter);
        } else if (api) {
          const response = await request.post(api, { ...params });
          const data = response.data.data;
          if (data) {
            return {
              data: data.data || [],
              success: true,
              total: data.total,
            };
          }
          return {
            data: [],
            success: true,
            total: 0,
          };
        }
      }}
      rowKey="id"
      params={params}
      postData={postData}
      toolBarRender={toolBarRender}
      toolbar={{
        // title: '测试',
        // subTitle: '测试一下',
        actions: toolbarActions,
        // search: [<Button>点击</Button>],
        // filter: [<Button>排序</Button>],
        // multipleLine: true,
        // menu: {
        //   type: 'dropdown',
        //   items: [
        //     {
        //       key: '1',
        //       label: '测试',
        //     },
        //     {
        //       key: '2',
        //       label: '测试2',
        //     },
        //   ],
        // },
        // tabs: {
        //   items: [
        //     {
        //       key: '1',
        //       tab: '测试',
        //       id: '1',
        //     },
        //     {
        //       key: '2',
        //       tab: '测试2',
        //       id: '2',
        //     },
        //   ],
        // },
      }}
      onRequestError={(error) => {
        message.error(error.message || '请求数据出错');
      }}
      tableClassName={tableClassName}
      search={search}
      beforeSearchSubmit={beforeSearchSubmit}
      form={form}
      onSubmit={onSubmit}
      onReset={onReset}
      columnEmptyText={columnEmptyText}
      debounceTime={debounceTime}
      revalidateOnFocus={true}
      columns={columns}
      rowSelection={{
        alwaysShowAlert,
      }}
      tableAlertRender={
        alertKey
          ? (selectInfo: { selectedRowKeys: (number | string)[]; selectedRows: any[] }) => {
              const { selectedRows } = selectInfo;
              return selectedRows.map((item) => <span>{item[alertKey]}</span>);
            }
          : false
      }
    />
  );
};

export default AppTable;
